<%@ page pageEncoding="UTF-8"%>
<%@ include file="../commons/head.jsp"%>
<title>jQueryHTML</title>
<style type="text/css">
	
</style>
<script type="text/javascript">
$(function(){
	$("#searchval").click(function(){
		alert($("#zhenheinfo1").val());
	});
	$("#searchattr").click(function(){
		alert($("#zhenheinfo1").attr("name"));
	});
	$("#searchtext").click(function(){
		alert($("#p1").text());
	});
	$("#searchhtml").click(function(){
		alert($("#p1").html());
	});
	/*  -------------------------------------  */
	$("#setval").click(function(){
		$("#zhenheinfo1").val("welcome to zhenheinfo!");
	});
	$("#setattr").click(function(){
		$("#zhenheinfo1").attr("name","hahahha");
	});
	$("#settext").click(function(){
		$("#p1").text("欢迎来到臻和信息!");
	});
	$("setaddClass").click(function(){
		$("#zhenheinfo1").addClass("easyui-textbox");
	});
	/*  -------------------------------------  */
	$("#addhtml").click(function(){
		$("#p1").html("welcome to<span style='color:red;'>臻和信息</span>!");
	});
	$("#addappend").click(function(){
		$("#p1").append("欢迎来到<span style='color:red;'>臻和信息info</span>!");
	});
	/*  -------------------------------------  */
	$("#delempty").click(function(){
		$("#pp1").empty();//移除匹配的元素中所有的子节点,匹配的元素仍然被保留
		//p标签没有被移除
		$("#pp1").html("welcome to<span style='color:red;'>臻和信息</span>!");
	});
	$("#delremove").click(function(){
		$("#pp2").remove();//移除所有匹配的元素以及其子节点
		//p标签被移除,所以下面的设置没有效果
		$("#pp2").html("welcome to<span style='color:red;'>臻和信息</span>!");
	});
	var xxx;
	$("#deldetach").click(function(){
		xxx = $("#pp3").detach();//"移除"(相当于隐藏)匹配元素,包括其子节点;
		$("#delxxx").attr("style","margin-left:15px;width: 150px;display:line;");
	});
	$("#delxxx").click(function(){
		$("#textpage").append(xxx);
		$("#delxxx").attr("style","display:none;");
	});
});
</script>
</head>
<body>
	<div class="jQueryHTML">
	<h3>jQuery HTML操作 - 获取、设置、添加、删除</h3>
		<div id="textpage" style="height: 150px;width:900px;margin-left: 30px;">
			<input id="zhenheinfo1" name="zhenheinfo" value="臻和信息"/><br>
			<span id="p1">欢迎大家来到<span>臻和信息</span>大家庭!</span>
			<p id="pp1">welcome,欢迎大家来到<span><b>臻和信息</b></span>大家庭</p>
			<p id="pp2" style="background-color: #ccc;">welcome,欢迎大家来到<span><b>臻和信息</b></span>大家庭</p>
			<p id="pp3" style="background-color: yellow;">welcome,欢迎大家来到<span><b>臻和信息</b></span>大家庭</p>
		</div>
		<hr>
		<!-- ------------------------------------- -->
		<div>
			<a id="searchval" href="#" class="easyui-linkbutton button" style="margin-left:15px;width: 150px;" iconCls="icon-search">.val()获取</a>
			<a id="searchattr" href="#" class="easyui-linkbutton button" style="margin-left:15px;width: 150px;" iconCls="icon-search">.attr()获取</a>	
			<a id="searchtext" href="#" class="easyui-linkbutton button" style="margin-left:15px;width: 150px;" iconCls="icon-search">.text()获取</a>
			<a id="searchhtml" href="#" class="easyui-linkbutton button" style="margin-left:15px;width: 150px;" iconCls="icon-search">.html()获取</a>
		</div>
		<hr>
		<!-- ------------------------------------- -->
		<div>
			<a id="setval" href="#" class="easyui-linkbutton button" style="margin-left:15px;width: 150px;" iconCls="icon-edit">.val()设置</a>
			<a id="setattr" href="#" class="easyui-linkbutton button" style="margin-left:15px;width: 150px;" iconCls="icon-edit">.attr()设置</a>	
			<a id="settext" href="#" class="easyui-linkbutton button" style="margin-left:15px;width: 150px;" iconCls="icon-edit">.text()设置</a>
			<a id="setaddClass" href="#" class="easyui-linkbutton button" style="margin-left:15px;width: 150px;" iconCls="icon-edit">.addClass()设置</a>
		</div>
		<hr>
		<!-- ------------------------------------- -->
		<div>
			<a id="addhtml" href="#" class="easyui-linkbutton button" style="margin-left:15px;width: 150px;" iconCls="icon-add">.html()添加</a>
			<a id="addappend" href="#" class="easyui-linkbutton button" style="margin-left:15px;width: 150px;" iconCls="icon-add">.append()添加</a>	
		</div>
		<hr>
		<!-- ------------------------------------- -->
		<div>
			<a id="delempty" href="#" class="easyui-linkbutton button" style="margin-left:15px;width: 150px;" iconCls="icon-remove">.empty()删除</a>
			<a id="delremove" href="#" class="easyui-linkbutton button" style="margin-left:15px;width: 150px;" iconCls="icon-remove">.remove()删除</a>	
			<a id="deldetach" href="#" class="easyui-linkbutton button" style="margin-left:15px;width: 150px;" iconCls="icon-remove">.detach()删除</a>
			<a id="delxxx" href="#" class="easyui-linkbutton button" style="display:none;" iconCls="icon-add">重新添加</a>
		</div>
		<hr>
		<!-- ------------------------------------- -->
	</div>
</body>
</html>